<template>
  <Row type="flex" :gutter="18">
    <Col :span="5" class = "Col1" id = "Col1">
      <Menu theme="light" @on-select="handleRoute" :active-name="activeMenu">
        <img src="@oj/views/Softexam/logo.jpg" class="img1"/>
        <p class="p1">软件工程师考试</p>
        <hr class="hr1"/>
        <MenuItem name="/Softexam"><Icon type="ios-paper"></Icon>考试信息</MenuItem>
        <MenuItem name="/Softexam/Practice"><Icon type="ios-paper"></Icon>习题练习</MenuItem>
        <MenuItem name="/Softexam/imitate"><Icon type="ios-paper"></Icon>模拟考试</MenuItem>
        <div class="div1"></div>
      </Menu>
    </Col>
    <Col :span="5" class = "Col2">
        <Panel class = "panle1">
          <div id = "title">
          <h2 class="h2">软件工程师考试</h2>
          <h3 class="h3">全称：计算机技术与软件专业技术资格（水平）考试</h3>
          <hr class="hr2">
          <hr class="hr2">
          </div>
          <div class="div2">
            <ul>
              <li class="li1"><h4 class="h5">简介:</h4>
              <p class="p2">
                计算机技术与软件专业技术资格（水平）考试（以下简称计算机软件资格考试）是原中国计算机软件专业技术资格和水平考试
                （简称软件考试）的完善与发展。计算机软件资格考试是由国家人力资源和社会保障部、工业和信息化部领导下的国家级考试，
                其目的是科学、公正地对全国计算机与软件专业技术人员进行职业资格、专业技术资格认定和专业技术水平测试。计算机软件
                资格考试设置了27个专业资格，涵盖5个专业领域， 3个级别层次（初级、中级、高级）。计算机软件资格考试在全国范围内已
                经实施了二十多年，近十年来,考试规模持续增长，截止目前,累计报考人数约有五百万人。该考试由于其权威性和严肃性，
                得到了社会各界及用人单位的广泛认同，并为推动国家信息产业发展，特别是在软件和服务产业的发展,以及提高各类信息技术人
                才的素质和能力中发挥了重要作用。
              </p>
              </li>
              <li class="li1">
                <h4 class="h5">资格设置：</h4>
                <div class="div3">
                <table class="table1">
                    <thead>
                            <tr>
                                <th style="width: 50px; height: 50px; text-align: center; background-color: #2D8CF0;"></th>
                                <th style="width: 100px; text-align: center; background-color: #2D8CF0;"><font color = #FFFFFF>计算机软件</font></th>
                                <th style="width: 100px; text-align: center; background-color: #2D8CF0;"><font color = #FFFFFF>计算机网络</font></th>
                                <th style="width: 100px; text-align: center; background-color: #2D8CF0;"><font color = #FFFFFF>计算机应用技术</font></th>
                                <th style="width: 100px; text-align: center; background-color: #2D8CF0;"><font color = #FFFFFF>信息系统</font></th>
                                <th style="width: 100px; text-align: center; background-color: #2D8CF0;"><font color = #FFFFFF>信息服务</font></th>
                            </tr>
                    </thead>
                    <tbody>
                      <tr>
                      <td style="height: 80px;background-color: #2593dd; text-align: center;"><font color = #FFFFFF>高级<br>资格</font></td>
                      <td colspan="5" style="background-color: #dfeefc;">
                        <a href="http://www.ruankao.org.cn/introduction/details?code=03_01" target="_blank" class="a1">信息系统项目管理师</a>&nbsp;&nbsp;
                        <a href="http://www.ruankao.org.cn/introduction/details?code=03_02" target="_blank">系统分析师</a>&nbsp;&nbsp;
                        <a href="http://www.ruankao.org.cn/introduction/details?code=03_03" title="系统架构设计师">系统架构设计师</a>&nbsp;&nbsp;
                        <a href="http://www.ruankao.org.cn/introduction/details?code=03_04" title="网络规划设计师">网络规划设计师</a>&nbsp;&nbsp;
                        <a href="http://www.ruankao.org.cn/introduction/details?code=03_05" title="系统规划与管理师">系统规划与管理师</a>
                      </td>
                      </tr>
                      <tr>
                        <td style="height: 150px;background-color: #2593dd; text-align: center;"><font color = #FFFFFF>中级<br>资格</font></td>
                        <td style="text-align: center;background-color: #dfeefc;">
                        <a href="http://www.ruankao.org.cn/introduction/details?code=02_14" title="软件评测师">软件评测师</a><br>
                        <a href="http://www.ruankao.org.cn/introduction/details?code=02_15" title="软件设计师">软件设计师</a><br>
                        <a href="http://www.ruankao.org.cn/introduction/details?code=02_16" title="软件过程能力评估师">软件过程能<br>力评估师</a>
                        </td>
                        <td style="text-align: center;background-color: #dfeefc;">
                          <a href="http://www.ruankao.org.cn/introduction/details?code=02_24" title="网络工程师">网络工程师</a>
                        </td>
                        <td style="text-align: center;background-color: #dfeefc;">
                        <a href="http://www.ruankao.org.cn/introduction/details?code=02_34" title="多媒体应用设计师">多媒体应用设计师</a><br>
                        <a href="http://www.ruankao.org.cn/introduction/details?code=02_35" title="嵌入式系统设计师">嵌入式系统设计师</a><br>
                        <a href="http://www.ruankao.org.cn/introduction/details?code=02_36" title="计算机辅助设计师">计算机辅助设计师</a><br>
                        <a href="http://www.ruankao.org.cn/introduction/details?code=02_37" title="电子商务设计师">电子商务设计师</a><br>
                        </td>
                        <td style="text-align: center;background-color: #dfeefc;">
                        <a href="http://www.ruankao.org.cn/introduction/details?code=02_43" title="系统集成项目管理工程师">系统集成项目管理<br>工程师</a><br>
                        <a href="http://www.ruankao.org.cn/introduction/details?code=02_44" title="信息系统监理师">信息系统监理师</a><br>
                        <a href="http://www.ruankao.org.cn/introduction/details?code=02_47" title="信息安全工程师">信息安全工程师</a><br>
                        <a href="http://www.ruankao.org.cn/introduction/details?code=02_45" title="数据库系统工程师">数据库系统工程师</a><br>
                        <a href="http://www.ruankao.org.cn/introduction/details?code=02_46" title="信息系统管理工程师">信息系统管理工程师</a><br>
                        </td>
                        <td style="text-align: center;background-color: #dfeefc;">
                        <a href="http://www.ruankao.org.cn/introduction/details?code=02_55" title="计算机硬件工程师">计算机硬件工程师</a><br>
                        <a href="http://www.ruankao.org.cn/introduction/details?code=02_54" title="信息技术支持工程师">信息技术支持工程师</a>
                        </td>
                      </tr>
                      <tr>
                        <td style="height: 80px;background-color: #2593dd; text-align: center;"><font color = #FFFFFF>低级<br>资格</font></td>
                        <td style="text-align: center;background-color: #dfeefc;">
                          <a href="http://www.ruankao.org.cn/introduction/details?code=01_18" title="程序员">程序员</a>
                        </td>
                        <td style="text-align: center;background-color: #dfeefc;">
                          <a href="http://www.ruankao.org.cn/introduction/details?code=01_28" title="网络管理员">网络管理员</a>
                        </td>
                        <td style="text-align: center;background-color: #dfeefc;">
                          <a href="http://www.ruankao.org.cn/introduction/details?code=01_38" title="多媒体应用制作技术员">多媒体应用制作技术员</a><br>
                          <a href="http://www.ruankao.org.cn/introduction/details?code=01_39" title="电子商务技术员">电子商务技术员</a>
                        </td>
                        <td style="text-align: center;background-color: #dfeefc;">
                          <a href="http://www.ruankao.org.cn/introduction/details?code=01_48" title="信息系统运行管理员">信息系统运行管理员</a>
                          </td>
                        <td style="text-align: center;background-color: #dfeefc;">
                        <a href="http://www.ruankao.org.cn/introduction/details?code=01_59" title="网页制作员">网页制作员</a><br>
                        <a href="http://www.ruankao.org.cn/introduction/details?code=01_58" title="信息处理技术员">信息处理技术员</a>
                        </td>
                      </tr>
                    </tbody>
                </table>
               </div>
              </li>
              <li class="li1">
                <h4 class="h5">官方网站： <a href="http://www.ruankao.org.cn/" target="_blank">中国计算机技术职业资格网</a></h4>
              </li>
              <li class="li1">
                <h4 class="h5">报考网址：： <a href="http://bm.ruankao.org.cn/sign/welcome" target="_blank">报名</a></h4>
              </li>
              <li class="li1">
                <h4 class="h5">相关信息（百度百科）： <a href="https://baike.baidu.com/item/%E8%BD%AF%E4%BB%B6%E6%B0%B4%E5%B9%B3%E8%80%83%E8%AF%95/1655786?fr=aladdin" target="_blank">软件水平考试</a></h4>
              </li>
            </ul>
          </div>
        </Panel>
    </Col>
  </Row>
</template>

<script>
  import { mapGetters, mapActions } from 'vuex'
  import Pagination from '@oj/components/Pagination'
  import CodeMirror from '@oj/components/CodeMirror.vue'

  export default {
    name: 'homeworkList',
    components: {
      Pagination
    },
    methods: {
      handleRoute (route) {
        this.$router.push(route)
      }
    },
    computed: {
      ...mapGetters(['website', 'modalStatus', 'user', 'isAuthenticated', 'isAdminRole']),
     // 跟随路由变化
      activeMenu () {
        return this.$route.path
      }
    }
  }
</script>
<style>
  .img1{
    width: 120px;
    height: 120px;
    margin-top: 60px;
    margin-left: 60px;
  }
  .p1{
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
  }
  .div1{
    height: 50px;
  }
  .div2{
    margin-left: 50px;
  }
  .div3{
    margin-left: 50px;
    width: 800px;
  }
  .hr1{
    margin-left: 20px;
    margin-bottom: 20px;
    width: 200px;
    color: #F8F8F9;
  }
  .hr2{
    margin-left: 50px;
    margin-bottom: 1px;
    width: 1100px;
    color: #F8F8F9;
  }
.Col1{
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 200px;
  margin-right: 0px;
}
.Col2{
  margin-top: 20px;
  margin-bottom: 20px;
  position: relative;
  left: -80px;
  width: 1200px;
  height: 1150px;
}
.panle1{
  width: 1200px;
  height: 1150px;
}
.h2{
  margin-top: 50px;
  margin-bottom: 0px;
  margin-left: 100px;
  margin-right: 50px;
  font-size: 20px;
  width: 180px;
}
.h3{
  margin-top: 0px;
  margin-bottom: 25px;
  margin-left: 100px;
  margin-right: 50px;
  font-size: 18px;
  width: 500px;
}
.h4{
  font-size: 16px;
  margin-top: 30px;
}
.h5{
  font-size: 16px;
  margin-top: 35px;
  margin-bottom: 10px;
}
.p2{
  width: 820px;
  font-size: 17px;
  margin-left: 30px;
}
.li1{
  margin-left: 120px;
  margin-top: 20px;
}
.a1{
  margin-left: 80px;
}
.table1{
  text-size: 18px;
  margin-bottom: 30px;
}
</style>
